import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../../routes/xin_he_routes.dart';
import '../../../utils/xh_styles.dart';
import '../../../utils/xin_he_UI_constancs.dart';
import '../../../utils/xin_he_image.dart';
import '../xin_he_mine_cloud_cha_zi/xin_he_assets_account_list_item_entity.dart';
import 'xin_he_mine_oil_card_account_logic.dart';

class XinHeMineOilCardAccountPage extends StatelessWidget {
  XinHeMineOilCardAccountPage({Key? key}) : super(key: key);

  final logic = Get.put(XinHeMineOilCardAccountLogic());
  final state = Get.find<XinHeMineOilCardAccountLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Obx(() => Scaffold(
      appBar: AppBar(
        leading: IconButton(
            onPressed: (){
              Get.back();
            },
            icon: Container(
              padding: const EdgeInsets.only(left: 7),
              alignment: Alignment.centerLeft,
              child: const XinHeAssetImage(
                'assets/images/home/app_back_3.png',
                width: 9.5,
                height: 17,
                fit: BoxFit.cover,),
            )
        ),
        backgroundColor: Colors.white,
        shadowColor: Colors.transparent,
        title: Text('茶油卡账户',style: TextStyle(color:XinHeColor('#222222'),fontSize: 17,fontWeight: FontWeight.w600)),
        centerTitle: true,
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const SizedBox(height: 15,),
          ///当前余额
          Stack(children: [
            Positioned(
                left: 15,
                top: 0,
                child: XinHeAssetImage('assets/images/mine/oil_card_bg.png',width: Get.width-30,height: (Get.width-30)*128/345,)),
            Container(
              margin: const EdgeInsets.symmetric(horizontal: 15),
              padding: const EdgeInsets.symmetric(horizontal: 15),
              height: (Get.width-30)*128/345,
              // color: Colors.red,
              child: Row(children: [
                ///左边
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    const SizedBox(height: 10,),
                    Text('我的茶油卡',style: TextStyle(color: XinHeColor('#FEFEFE'),fontSize: 11,fontWeight: FontWeight.w500),),
                    const SizedBox(height: 10,),
                    Row(children: [
                      RichText(text: TextSpan(children: [
                        TextSpan(text:'${logic.assetsModel.value.total}/${logic.assetsModel.value.remainder}',style: TextStyle(color: XinHeColor('#FFFFFF'),fontSize: 17,fontWeight: FontWeight.w500)),
                        TextSpan(text: '(已兑换：${logic.assetsModel.value.jiedong})',style: TextStyle(color: XinHeColor('#FEFEFE'),fontSize: 13,fontWeight: FontWeight.w500),),

                      ]),),

                    ],),
                    const Spacer(),
                    RichText(text: const TextSpan(children: [
                      // TextSpan(text:'系统每日解冻：：',style: TextStyle(color: XinHeColor('#B3EBEB'),fontSize: 12,fontWeight: FontWeight.w500)),
                      TextSpan(text: '认养油茶树获得',style: TextStyle(color: Colors.white,fontSize: 12,fontWeight: FontWeight.w500),),

                    ]),),
                    const SizedBox(height: 15,),

                  ],),

                Spacer(),
                GestureDetector(
                  onTap:(){
                    Get.toNamed(XinHeRoutes.oilExchange);
                  },
                  child: Container(
                    width:64,
                    height: 21,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10.5)),
                    child: Text('立即兑换',style: TextStyle(color: XinHeColor('#49BBBB'),fontSize: 11,fontWeight: FontWeight.w500),),
                  ),
                ),


              ],),
            ),
          ],),
          const SizedBox(height: 20,),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15),
            child: Text('茶油卡明细',style: TextStyle(color: XinHeColor('#333333'),fontSize: 14,fontWeight: FontWeight.w600),),
          ),
          const SizedBox(height: 10,),
          Expanded(child: ListView.separated(
            itemCount: logic.dataList.length,
            itemBuilder: (ctx,index){
              XinHeAssetsAccountListItemEntity model = logic.dataList[index];

              return _itemView(model);
            }, separatorBuilder: (BuildContext context, int index) { return SizedBox(height: 10,); },))
        ],),
    ));
  }
  Widget _itemView(XinHeAssetsAccountListItemEntity model){
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 15),
      height: 66,
      padding: const EdgeInsets.symmetric(horizontal: 15),
      decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(5)),
      child: Row(children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(XinHeGetStrClass.getTradeString(model.tradeType??''), style: TextStyle(color: XinHeColor('#333333'),fontSize: 13,fontWeight: FontWeight.w500),),
            const SizedBox(height: 10,),
            Text(model.createTime??'',style: TextStyle(color: XinHeColor('#999999'),fontSize: 11,fontWeight: FontWeight.w500),),


          ],),
        const Spacer(),
        Text('${model.tradeAmount??''}' ,style: TextStyle(color: XinHeColor('#EB5029'),fontSize: 13,fontWeight: FontWeight.w500),),
      ],),
    );
  }
}
